<template>
  <div class="manage">
    <div class="manage-header">
      <el-button type="primary" @click="showAddForm">新增问卷</el-button>
      <el-form :inline="true" :model="biaoGe">
        <el-form-item class="Xm">
          <el-input v-model="biaoGe.keyword" placeholder="请输入问卷标题" />
        </el-form-item>
        <el-button class="Xm" type="success" @click="onSubmit">查询</el-button>
      </el-form>
    </div>
    <div class="manage">
      <el-table v-model="tableData" :data="tableData" stripe style="width: 100%" :max-height="700">
        <!-- 表格列定义 -->
        <el-table-column prop="title" label="问卷标题" width="180" :show-overflow-tooltip="true" />
        <el-table-column prop="desc" label="问卷概述" width="180" :show-overflow-tooltip="true" />
        <el-table-column prop="banner" label="问卷调查顶部图" width="180">
          <template slot-scope="scope">
            <img :src="scope.row.banner" width="90">
          </template>
        </el-table-column>
        <el-table-column prop="start_time" label="开始时间" width="200">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.start_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="end_time" label="结束时间" width="200">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.end_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="问卷状态" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.status == 0 ? '关闭' : '启用' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="prize_status" label="抽奖状态" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.prize_status == 0 ? '关闭' : '启用' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="answer_limit" label="答题限制" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.answer_limit == 0 ? '总次数' : '每日次数' }}</span>
          </template>

        </el-table-column>
        <el-table-column prop="range" label="报名限制" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.range == 0 ? '关闭' : '开启' }}</span>
          </template>

        </el-table-column>
        <el-table-column prop="max_answer_count" label="答题次数" width="100" />
        <el-table-column prop="everybody_count" label="抽奖次数" width="100" />

        <el-table-column prop="created_at" label="创建日期" width="180">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.created_at) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" fixed="right" width="90">
          <template slot-scope="scope">
            <el-dropdown class="dropdown" @command="handleCommand(scope.row.id, $event)">
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right" />
              </span>

              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item icon="el-icon-circle-plus" command="c" divided>新增问卷</el-dropdown-item> -->
                <el-button style=" border: 0;" class="button" icon="el-icon-circle-plus" type="txet" size="medium" @click="handleEdit(scope.row)">修改问卷</el-button>

                <el-dropdown-item icon="el-icon-circle-plus" command="a" divided>新增奖品</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" command="b" divided>新增问题</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" command="r" divided>报名限制</el-dropdown-item>
                <el-dropdown-item icon="el-icon-view" command="d" divided>查看奖品列表</el-dropdown-item>
                <el-dropdown-item icon="el-icon-view" command="e" divided>查看中奖记录</el-dropdown-item>
                <el-dropdown-item icon="el-icon-view" command="f" divided>查看问卷问题</el-dropdown-item>
                <el-dropdown-item icon="el-icon-view" command="g" divided>查看参与人数</el-dropdown-item>
                <el-dropdown-item icon="el-icon-view" command="h" divided>核销奖品</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-dialog
              title="奖品核销二维码"

              :visible.sync="dialogVisibles"
              width="30%"
              :before-close="handleClose"
              :append-to-body="true"
            >
              <div>
                <div id="qrcode" ref="qrcode" style=" margin-left: 20%;" />
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="xsws">取 消</el-button>
                <el-button type="primary" @click="sdsad">确 定</el-button>
              </span>
            </el-dialog>
            <el-dialog width="50%" title="修改问卷" :visible.sync="dialogVisible" :before-close="handleClose" :append-to-body="true">
              <!-- 修改表单项定义 -->
              <div class="form-container">
                <el-form ref="form" :model="formData" :inline="true" label-width="100px">
                  <el-form-item label="问卷标题" prop="title">
                    <el-input v-model="formData.title" />
                  </el-form-item>
                  <div style="margin: 1px 0" />
                  <el-form-item label="问卷概述" prop="desc">
                    <el-input v-model="formData.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" class="custom-width" />
                  </el-form-item>
                  <div style="margin: 1px 0" />
                  <el-form-item label="问卷开始时间" prop="start_time">
                    <el-date-picker v-model="formData.start_time" type="datetime" placeholder="选择日期时间" />
                  </el-form-item>
                  <div style="margin: 1px 0" />
                  <el-form-item label="问卷结束时间" prop="end_time">
                    <el-date-picker v-model="formData.end_time" type="datetime" placeholder="选择日期时间" />
                  </el-form-item>
                  <div style="margin: 1px 0" />
                  <el-form-item label="问卷状态" prop="status">
                    <el-radio v-model="formData.status" :label="0">关闭</el-radio>
                    <el-radio v-model="formData.status" :label="1">启用</el-radio>
                  </el-form-item>
                  <div style="margin: 1px 0" />
                  <el-form-item label="抽奖状态" prop="prize_status">
                    <el-radio v-model="formData.prize_status" :label="0">关闭</el-radio>
                    <el-radio v-model="formData.prize_status" :label="1">启用</el-radio>
                  </el-form-item>  <div style="margin: 1px 0" />
                  <el-form-item label="报名限制" prop="range">
                    <el-radio v-model="formData.range" :label="0">关闭</el-radio>
                    <el-radio v-model="formData.range" :label="1">开启(姓名和手机号)</el-radio>
                    <el-radio v-model="formData.range" :label="2">开启(仅限手机号)</el-radio>
                  </el-form-item>
                  <div style="margin: 1px 0" />
                  <el-form-item label="答题限制" prop="answer_limit">
                    <el-radio v-model="formData.answer_limit" :label="0">总次数</el-radio>
                    <el-radio v-model="formData.answer_limit" :label="1">每日次数</el-radio>
                  </el-form-item>
                  <div style="margin: 1px 0" />
                  <el-form-item label="答题次数" prop="max_answer_count">
                    <el-input-number v-model="formData.max_answer_count" :min="1" :max="999" label="描述文字" />
                  </el-form-item>
                  <div style="margin: 1px 0" />
                  <el-form-item label="抽奖次数" prop="everybody_count">
                    <el-input-number v-model="formData.everybody_count" :min="0" :max="999" label="描述文字" />
                  </el-form-item>
                  <div style="margin: 1px 0" />
                  <el-form-item label="抽奖说明" prop="prize_desc">
                    <el-input v-model="formData.prize_desc" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" class="custom-width" />
                  </el-form-item>
                  <div style="margin: 1px 0" />
                  <el-form-item label="顶部图">
                    <el-upload class="banner-uploader" :headers="{ Authorization: token }" :action="uploadUrl" :show-file-list="false" :before-upload="beforebannerUpload" :on-success="handlebannerSuccess" :on-error="handlebannerError" list-type="picture-card">
                      <img v-if="formData.banner" :src="formData.banner" class="banner">
                      <i v-else class="el-icon-plus banner-uploader-icon" />
                    </el-upload>
                  </el-form-item>
                </el-form>
              </div>
              <div slot="footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSave">保存</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog width="50%" title="新增问卷" :visible.sync="addVisible" :append-to-body="true" :before-close="handleClose">
        <el-form ref="addFormData" :model="addFormData" :inline="true" :rules="rules" label-width="100px">
          <!-- 新增表单项定义 -->
          <el-form-item label="问卷标题" prop="title">
            <el-input v-model="addFormData.title" class="custom-input" />
          </el-form-item>
          <div style="margin: 1px 0" />
          <el-form-item label="问卷概述" prop="desc">
            <el-input v-model="addFormData.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" class="custom-width" />
          </el-form-item>
          <div style="margin: 1px 0" />
          <el-form-item label="问卷开始时间" prop="start_time">
            <el-date-picker v-model="addFormData.start_time" type="datetime" placeholder="选择日期时间" />
          </el-form-item>
          <div style="margin: 1px 0" />
          <el-form-item label="问卷结束时间" prop="end_time">
            <el-date-picker v-model="addFormData.end_time" type="datetime" placeholder="选择日期时间" />
          </el-form-item>
          <div style="margin: 1px 0" />
          <el-form-item label="问卷状态" prop="status">
            <el-radio v-model="addFormData.status" :label="0">关闭</el-radio>
            <el-radio v-model="addFormData.status" :label="1">启用</el-radio>
          </el-form-item>
          <div style="margin: 1px 0" />
          <el-form-item label="抽奖状态" prop="prize_status">
            <el-radio v-model="addFormData.prize_status" :label="0">关闭</el-radio>
            <el-radio v-model="addFormData.prize_status" :label="1">启用</el-radio>
          </el-form-item>  <div style="margin: 1px 0" />
          <el-form-item label="报名限制" prop="range">
            <el-radio v-model="addFormData.range" :label="0">关闭</el-radio>
            <el-radio v-model="addFormData.range" :label="1">开启(姓名和手机号)</el-radio>
            <el-radio v-model="addFormData.range" :label="2">开启(仅限手机号)</el-radio>
          </el-form-item>
          <div style="margin: 1px 0" />
          <el-form-item label="答题限制" prop="answer_limit">
            <el-radio v-model="addFormData.answer_limit" :label="0">总次数</el-radio>
            <el-radio v-model="addFormData.answer_limit" :label="1">每日次数</el-radio>
          </el-form-item>
          <div style="margin: 1px 0" />
          <el-form-item label="答题次数" prop="max_answer_count">
            <el-input-number v-model="addFormData.max_answer_count" :min="1" :max="999" label="描述文字" />
          </el-form-item>
          <div style="margin: 1px 0" />
          <el-form-item label="抽奖次数" prop="everybody_count">
            <el-input-number v-model="addFormData.everybody_count" :min="0" :max="999" label="描述文字" />
          </el-form-item>
          <div style="margin: 1px 0" />
          <el-form-item label="抽奖说明" prop="prize_desc">
            <el-input v-model="addFormData.prize_desc" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" class="custom-width" />
          </el-form-item>
          <div style="margin: 1px 0" />
          <el-form-item label="顶部图" prop="banner">
            <el-upload class="banner-uploader" :headers="{ Authorization: token }" :action="uploadUrl" :show-file-list="false" :before-upload="beforeAxinzheng" :on-success="beforeAxinzhe" :on-error="beforeAxinz" list-type="picture-card">
              <img v-if="addFormData.banner" :src="addFormData.banner" class="banner">
              <i class="el-icon-plus" />
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="onel">取消</el-button>
          <el-button type="primary" @click="submitForm('addFormData')">保存</el-button>
        </div>
      </el-dialog>

      <div />
      <!-- <div>
        <el-dialog width="50%" title="修改用户" :visible.sync="applicaissue" :append-to-body="true" :before-close="handleClose">
          <el-form ref="applicationData" :model="applicationData" :inline="true" :rules="ruleses" label-width="100px">

            <el-form-item label="用户名" prop="name">
              <el-input v-model="applicationData.name" class="custom-input" />
            </el-form-item>
            <div style="margin: 1px 0" />
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="applicationData.mobile" class="custom-input" />
            </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button @click="applicaissue = false">取消</el-button>
            <el-button type="primary" @click="submitapplica('applicationData')">保存</el-button>
          </div>
        </el-dialog>
      </div> -->
      <div>
        <el-dialog width="50%" title="新增用户" :visible.sync="applicaVisible" :append-to-body="true" :before-close="handleClose">
          <el-form ref="applicationData" :model="applicationData" :inline="true" :rules="ruleses" label-width="100px">
            <!-- 新增表单项定义 -->
            <el-form-item label="用户名" prop="name">
              <el-input v-model="applicationData.name" class="custom-input" />
            </el-form-item>
            <div style="margin: 1px 0" />
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="applicationData.mobile" class="custom-input" />
            </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button @click="applionel">取消</el-button>
            <el-button type="primary" @click="submitapplica('applicationData')">保存</el-button>
          </div>
        </el-dialog>
      </div>
      <div>
        <el-dialog width="50%" title="修改奖品" :visible.sync="revisepriz" :before-close="handleClose" :append-to-body="true">
          <!-- 修改表单项定义 -->
          <div class="form-container">
            <el-form ref="form" :model="addprizeFormData" :inline="true" label-width="100px">
              <el-form-item label="奖品名称" prop="title">
                <el-input v-model="addprizeFormData.title" />
              </el-form-item>
              <div style="margin: 1px 0" />
              <el-form-item label="奖品数量" prop="count">
                <el-input-number v-model="addprizeFormData.count" :min="0" :max="999" label="描述文字" />
              </el-form-item>
              <div style="margin: 1px 0" />
              <el-form-item label="奖品概率" prop="odds">
                <el-input-number v-model="addprizeFormData.odds" :min="0" :max="100" label="描述文字" />
              </el-form-item>
              <div style="margin: 1px 0" />
              <el-form-item label="状态" prop="status">
                <el-radio v-model="addprizeFormData.status" :label="0">关闭</el-radio>
                <el-radio v-model="addprizeFormData.status" :label="1">启用</el-radio>
              </el-form-item>
              <div style="margin: 1px 0" />
              <el-form-item label="奖品图片" prop="image">
                <el-upload class="banner-uploader" :headers="{ Authorization: token }" :action="uploadUrl" :show-file-list="false" :before-upload="reviseP" :on-success="revisE" :on-error="reviS" list-type="picture-card">
                  <img v-if="addprizeFormData.image" :src="addprizeFormData.image" class="banner">
                  <i class="el-icon-plus" />
                </el-upload>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer">
            <el-button @click="revisepriz = false">取消</el-button>
            <el-button type="primary" @click="revisePrize">保存</el-button>
          </div>
        </el-dialog>
      </div>

      <div>

        <el-dialog width="50%" title="修改问题" :visible.sync="reviseissue" :before-close="handleClose" :append-to-body="true">
          <!-- 修改表单项定义 -->
          <div class="form-container">
            <el-form ref="form" :model="addissueFormData" :inline="true" label-width="100px">
              <el-form-item label="问题题目" prop="title">
                <el-input v-model="addissueFormData.title" class="custom-input" />
              </el-form-item>
              <div style="margin: 1px 0" />
              <el-form-item label="题目类型" prop="type">
                <el-radio v-model="addissueFormData.type" :label="0">填空</el-radio>
                <el-radio v-model="addissueFormData.type" :label="1">单选</el-radio>
                <el-radio v-model="addissueFormData.type" :label="2">多选</el-radio>
              </el-form-item>
              <div style="margin: 1px 0" />
              <el-form-item v-if="addissueFormData.type !== 0" label="选项" prop="options">
                <div v-for="(option, index) in addissueFormData.options" :key="index" style="display: flex; align-items: center;">
                  <el-input v-model="addissueFormData.options[index]" style="width: 400px;   margin-bottom: 20px;" type="textarea" :rows="1" @change="removeCommas(index)" />
                  <el-button style="margin-left: 10px;margin-bottom: 20px; " :disabled="addissueFormData.options.length === 1" @click="removeOption(index)">-</el-button>
                  <el-button style="margin-left: 10px;margin-bottom: 20px; " @click="addOption">+</el-button>
                </div>
                <!-- <el-button class="ssx" :disabled="addissueFormData.options.length === 1" @click="removeOption(index)">-</el-button> -->

              </el-form-item>
              <div style="margin: 1px 0" />
              <el-form-item label="状态" prop="status">
                <el-radio v-model="addissueFormData.status" :label="0">关闭</el-radio>
                <el-radio v-model="addissueFormData.status" :label="1">启用</el-radio>
              </el-form-item>
              <div style="margin: 1px 0" />
              <el-form-item v-if="addissueFormData.type !== 0" label="是否开启其它" prop="open_other">
                <el-radio v-model="addissueFormData.open_other" :label="0">关闭</el-radio>
                <el-radio v-model="addissueFormData.open_other" :label="1">启用</el-radio>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer">
            <el-button @click="reviseissue = false">取消</el-button>
            <el-button type="primary" @click="reviseissu">保存</el-button>
          </div>
        </el-dialog>
      </div>

      <div>
        <el-dialog width="80%" height="50%" title="奖品列表" :visible.sync="addView" :append-to-body="true" :before-close="handleClose">
          <el-form v-model="prizeData" :data="prizeData" :inline="true" :rules="rules" label-width="100px">
            <el-table
              v-model="prizeData"
              :data="prizeData"
              style="width: 100%"
              :max-height="400"
            >
              <el-table-column
                prop="title"
                label="奖品名称"
                width="180"
              />
              <el-table-column
                prop="count"
                label="数量"
                width="180"
              />
              <el-table-column prop="status" label="状态" width="180">
                <template slot-scope="scope">
                  <span>{{ scope.row.status == 0 ? '关闭' : '启用' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="banner" label="奖品图" width="180">
                <template slot-scope="scope">
                  <img :src="scope.row.image" width="100">
                </template>
              </el-table-column>
              <el-table-column
                prop="odds"
                label="中奖概率"
              >
                <template slot-scope="scope">
                  {{ scope.row.odds }}%  <!-- 在渲染的数据后面添加% -->
                </template>
              </el-table-column>
              <el-table-column prop="created_at" label="创建日期">
                <template slot-scope="scope">
                  <span>{{ formatDate(scope.row.created_at) }}</span>
                </template>
              </el-table-column>

              <template>
                <el-table-column prop="" label="操作" fixed="right">
                  <el-button slot-scope="scope" type="primary" size="mini" @click="revisePri(scope.row)">修改奖品</el-button>
                </el-table-column>
              </template>

            </el-table>
          </el-form>
        </el-dialog>
      </div>

      <div>
        <el-dialog width="80%" height="50%" title="中奖记录" :visible.sync="Recording" :append-to-body="true" :before-close="handleClose">
          <el-form :inline="true" :model="RecordingFetch">
            <el-form-item class="Xm">
              <el-input v-model="RecordingFetch.keyword" placeholder="请输入中奖人姓名" />
            </el-form-item>
            <el-button class="Xm" type="success" @click="onSbmit">查询</el-button>
          </el-form>

          <el-form v-model="RecordingData" :data="RecordingData" :inline="true" :rules="rules" label-width="100px">
            <el-table
              v-model="RecordingData"
              :data="RecordingData"
              style="width: 100%"
              :max-height="400"
            >
              <el-table-column
                prop="prize_title"
                label="奖品"
                width="180"
              />
              <el-table-column
                prop="name"
                label="中奖人姓名"
                width="180"
              />
              <el-table-column
                prop="mobile"
                label="中奖人手机号"
                width="180"
              />
              <el-table-column prop="status" label="领取状态" width="180">
                <template slot-scope="scope">
                  <span>{{ scope.row.status == 0 ? '待领取' : '已领取' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="prize_image" label="奖品图" width="180">
                <template slot-scope="scope">
                  <img :src="scope.row.prize_image" width="90">
                </template>
              </el-table-column>
              <el-table-column prop="receive_time" label="领奖日期" width="180">
                <template slot-scope="scope">
                  <span>{{ formatDate(scope.row.receive_time) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="created_at" label="创建日期">
                <template slot-scope="scope">
                  <span>{{ formatDate(scope.row.created_at) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <!-- <div class="pagerE">
            <el-pagination layout="total,sizes,prev, pager, next,jumper" :total="toTal" :page-sizes="[10, 20, 30, 50, 100]" :page-size="RecordingFetch.limit" :current-page="RecordingFetch.page" class="custom-pagination" @current-change="handlePag" @size-change="uoludePa" />
          </div> -->
        </el-dialog>
      </div>

      <div>
        <el-dialog width="80%" height="50%" title="问题答卷" :visible.sync="Answer" :append-to-body="true" :before-close="handleClose">
          <el-form v-model="AnswerList" :data="AnswerList" :inline="true" :rules="rules" label-width="100px">
            <div v-for="(item, index) in AnswerList" :key="item.id" style="border: 1px solid #f5f5f5; margin-bottom: 20px; box-shadow: 0 0 7px #5b5b5b;">

              <div style="display: flex; margin-top: 10px; ">
                <div style="margin-left: 10px;">{{ index + 1 }}.</div>
                <div style="margin-left: 10px;">{{ item.title }}</div>
                <div v-if="item.type === 1" style="margin-left: 10px;">(单选题)</div>
                <div v-else-if="item.type === 2" style="margin-left: 10px;">(多选题)</div>
                <div v-else-if="item.type === 0" style="margin-left: 10px;">(填空)</div>
              </div>

              <el-radio-group v-if="item.type === 1 && item.open_other !== 1" v-model="radio" style="display: flex; flex-direction: column; margin-top: 10px;margin-left: 30px;">
                <el-radio disabled :label="3">{{ item.user_answer }}</el-radio>

              </el-radio-group>
              <el-checkbox-group v-if="item.type === 2 " v-model="checkList" style="display: flex; flex-direction: column;margin-top: 10px;margin-left: 30px;">
                <template v-for="answer in item.user_answer.split(',')">
                  <el-checkbox :key="answer.trim()" v-model="checked" style="margin-top: 10px;" disabled :label="answer.trim()">{{ answer.trim() }}</el-checkbox>
                </template>
              </el-checkbox-group>
              <!-- <div v-if="item.type === 0" style="margin-top: 10px;margin-bottom: 10px; margin-left: 30px;">填空:{{ item.other_answer }}</div> -->
              <!-- <div v-if="item.open_other === 1 && item.type !== 0" style="margin-top: 10px;margin-bottom: 10px; margin-left: 30px;">其它:{{ item.other_answer }}</div> -->
              <el-input
                v-if="item.type === 0"
                :value="item.other_answer"
                type="textarea"
                :rows="2"

                class="elinpuh"
              />
              <el-input
                v-if="item.open_other === 1"
                :value="item.other_answer"
                type="textarea"
                :rows="2"

                class="elinpuh"
              />
            </div>
          </el-form>
        </el-dialog>
      </div>

      <div>
        <el-dialog width="80%" height="50%" title="问卷问题" :visible.sync="issue" :append-to-body="true" :before-close="handleClose">
          <el-form :inline="true" :model="issueData">
            <el-form-item class="Xm">
              <el-input v-model="issueData.keyword" placeholder="请输入问题题目" />
            </el-form-item>
            <el-button class="Xm" type="success" @click="issueSubmit">查询</el-button>
          </el-form>

          <el-form v-model="issueList" :data="issueList" :inline="true" :rules="rules" label-width="100px">
            <el-table
              v-model="issueList"
              :data="issueList"
              style="width: 100%"
              :max-height="400"
            >
              <el-table-column
                prop="title"
                label="问题题目"
                width="180"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="type"
                label="题目类型"
                width="180"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.type === 0">填空</span>
                  <span v-else-if="scope.row.type === 1">单选</span>
                  <span v-else-if="scope.row.type === 2">多选</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="options"
                label="选项"
                width="180"
              />
              <el-table-column prop="status" label="问题状态" width="180">
                <template slot-scope="scope">
                  <span>{{ scope.row.status == 0 ? '关闭' : '开启' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="open_other" label="是否开启其它" width="180">
                <template slot-scope="scope">
                  <span>{{ scope.row.open_other == 0 ? '未开启' : '已开启' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="created_at" label="创建日期">
                <template slot-scope="scope">
                  <span>{{ formatDate(scope.row.created_at) }}</span>
                </template>
              </el-table-column>
              <template>
                <el-table-column prop="" label="操作" fixed="right">
                  <el-button slot-scope="scope" type="primary" size="mini" @click="reviseiss(scope.row)">修改问题</el-button>
                </el-table-column>
              </template>
            </el-table>
          </el-form>

        </el-dialog>
      </div>

      <div>
        <el-dialog width="80%" height="50%" title="问卷报名限制" :visible.sync="application" :append-to-body="true" :before-close="handleClose">
          <!-- <el-form :inline="true" :model="applicaListData">
            <el-form-item class="Xm">
              <el-input v-model="applicaListData.keyword" placeholder="请输入姓名" />
            </el-form-item>
            <el-button class="Xm" type="success" @click="applicaSubmit">查询</el-button>
          </el-form> -->
          <div class="manage-header">
            <el-button type="primary" @click="applicaAddForm">新增用户</el-button>
            <el-form :inline="true" :model="applicaListData">
              <el-form-item class="Xm">
                <el-input v-model="applicaListData.keyword" placeholder="请输入姓名" />
              </el-form-item>
              <el-button class="Xm" type="success" @click="applicaSubmit">查询</el-button>
            </el-form>
          </div>
          <el-form v-model="applicaList" :data="applicaList" :inline="true" :rules="rules" label-width="100px">
            <el-table
              v-model="applicaList"
              :data="applicaList"
              style="width: 100%;"
              :max-height="400"
            >
              <el-table-column

                prop="name"
                label="姓名"
                width="680"
              />
              <el-table-column
                prop="mobile"
                label="手机号"
                width="680"
              />
              <el-table-column
                label="操作"
                width="100"
              >
                <template slot-scope="scope">
                  <!-- <el-button type="text" size="small" @click="obtainView(scope.row)">删除</el-button> -->
                  <el-button type="primary" size="mini" @click="obtainView(scope.row)">删除</el-button>
                  <!-- <el-button type="text" size="small" @click="applicaView(scope.row)">修改</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div class="pagerE">
            <el-pagination layout="total,sizes,prev, pager, next,jumper" :total="applicaListTotal" :page-sizes="[10, 20, 30, 50, 100]" :page-size="applicaListData.limit" :current-page="applicaListData.page" class="custom-pagination" @current-change="participatePage" @size-change="applicaLimit" />
          </div>
        </el-dialog>
      </div>

      <div>
        <el-dialog width="80%" height="50%" title="参与人数" :visible.sync="participate" :append-to-body="true" :before-close="handleClose">
          <el-form :inline="true" :model="participateData">
            <el-form-item class="Xm">
              <el-input v-model="participateData.keyword" placeholder="请输入姓名" />
            </el-form-item>
            <el-button class="Xm" type="success" @click="participateSubmit">查询</el-button>
          </el-form>

          <el-form v-model="participateList" :data="participateList" :inline="true" :rules="rules" label-width="100px">
            <el-table
              v-model="participateList"
              :data="participateList"
              style="width: 100%"
              :max-height="400"
            >
              <el-table-column
                prop="name"
                label="姓名"
                width="180"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="mobile"
                label="手机号"
                width="180"
              />
              <el-table-column
                prop="lottery_count"
                label="抽奖次数"
                width="180"
              />
              <el-table-column
                prop="complete_count"
                label="已抽次数"
                width="180"
              />
              <el-table-column prop="created_at" label="创建日期">
                <template slot-scope="scope">
                  <span>{{ formatDate(scope.row.created_at) }}</span>
                </template>
              </el-table-column>
              <template>
                <el-table-column prop="" label="操作" fixed="right">
                  <el-button slot-scope="scope" type="primary" size="mini" @click="issueView(scope.row)">查看答卷</el-button>
                </el-table-column>
              </template>

            </el-table>
          </el-form>
          <div class="pagerE">
            <el-pagination layout="total,sizes,prev, pager, next,jumper" :total="participateTotal" :page-sizes="[10, 20, 30, 50, 100]" :page-size="participateData.limit" :current-page="participateData.page" class="custom-pagination" @current-change="participatePage" @size-change="participateLimit" />
          </div>
        </el-dialog>
      </div>

      <div>
        <el-dialog width="50%" title="新增奖品" :visible.sync="addprize" :append-to-body="true" :before-close="handleClose">
          <el-form ref="prizeFormData" :model="prizeFormData" :inline="true" :rules="ruless" label-width="100px">
            <!-- 新增表单项定义 -->
            <el-form-item label="奖品名称" prop="title">
              <el-input v-model="prizeFormData.title" />
            </el-form-item>
            <div style="margin: 1px 0" />
            <el-form-item label="奖品数量" prop="count">
              <el-input-number v-model="prizeFormData.count" :min="0" :max="999" label="描述文字" />
            </el-form-item>
            <div style="margin: 1px 0" />
            <el-form-item label="奖品概率" prop="odds">
              <el-input-number v-model="prizeFormData.odds" :min="0" :max="100" label="描述文字" />
            </el-form-item>

            <div style="margin: 1px 0" />
            <el-form-item label="状态" prop="status">
              <el-radio v-model="prizeFormData.status" :label="0">关闭</el-radio>
              <el-radio v-model="prizeFormData.status" :label="1">启用</el-radio>
            </el-form-item>

            <div style="margin: 1px 0" />
            <el-form-item label="奖品图片" prop="image">
              <el-upload class="banner-uploader" :headers="{ Authorization: token }" :action="uploadUrl" :show-file-list="false" :before-upload="prizeupload" :on-success="prizeuplo" :on-error="prizeupl" list-type="picture-card">
                <img v-if="prizeFormData.image" :src="prizeFormData.image" class="banner">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button @click="onell">取消</el-button>
            <el-button type="primary" @click="prizeNew('prizeFormData')">保存</el-button>
          </div>
        </el-dialog>
      </div>

      <div>
        <el-dialog width="50%" title="新增问题" :visible.sync="addissue" :append-to-body="true" :before-close="handleClose">
          <el-form ref="issueFormData" :model="issueFormData" :inline="true" :rules="rulless" label-width="110px">
            <!-- 新增表单项定义 -->
            <el-form-item label="问题题目" prop="title">
              <el-input v-model="issueFormData.title" class="custom-input" />
            </el-form-item>
            <div style="margin: 1px 0" />
            <el-form-item label="题目类型" prop="type">
              <el-radio v-model="issueFormData.type" :label="0">填空</el-radio>
              <el-radio v-model="issueFormData.type" :label="1">单选</el-radio>
              <el-radio v-model="issueFormData.type" :label="2">多选</el-radio>
            </el-form-item>
            <div style="margin: 1px 0" />
            <el-form-item v-if="issueFormData.type !== 0" label="选项" prop="options">
              <div v-for="(option, index) in issueFormData.options" :key="index" style="display: flex; align-items: center;">
                <el-input v-model="issueFormData.options[index]" style="width: 400px;   margin-bottom: 20px;" type="textarea" :rows="1" @change="removeCommas(index)" />
                <el-button style="margin-left: 10px;margin-bottom: 20px; " :disabled="issueFormData.options.length === 1" @click="removeOption(index)">-</el-button>
                <el-button style="margin-left: 10px;margin-bottom: 20px; " @click="addOption">+</el-button>
                <!-- <el-button class="ssx" @click="removeOption(index)">-</el-button> -->
              </div>

            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio v-model="issueFormData.status" :label="0">关闭</el-radio>
              <el-radio v-model="issueFormData.status" :label="1">启用</el-radio>
            </el-form-item>
            <div style="margin: 1px 0" />
            <el-form-item v-if="issueFormData.type !== 0" label="是否开启其它" prop="open_other">
              <el-radio v-model="issueFormData.open_other" :label="0">关闭</el-radio>
              <el-radio v-model="issueFormData.open_other" :label="1">启用</el-radio>
            </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button @click="oneel">取消</el-button>
            <el-button type="primary" @click="issueNew('issueFormData')">保存</el-button>
          </div>
        </el-dialog>
      </div>

    </div>
    <div class="pager">
      <el-pagination layout="total,sizes,prev, pager, next,jumper" :total="total" :page-sizes="[10, 20, 30, 50, 100]" :page-size="biaoGe.limit" :current-page="biaoGe.page" class="custom-pagination" @current-change="handlePage" @size-change="uoludePage" />
    </div>
  </div>
</template>
<script>
// import ClipboardJS from 'clipboard'
import { postUser, postUsser, updataUser, postprize, postRecording, postIssue, postAnswer, postparticipate, postprizeNew, postiIssue, postrevise, postissue, obtain, dele, application, modify } from '@/api/guide'
// import { postUsser, postUser, updataUser, postScer } from '../api/Mall'
// import Cookies from 'js-cookie'
import { getToken } from '@/utils/auth'
import QRCode from 'qrcodejs2'
export default {
  comments: { QRCode },
  data() {
    return {
      otherChecked: false, // "其它"复选框是否被选中
      textarea: '',
      radio: 3,
      checked: true,
      dialogVisibles: false,
      rules: {
        title: [{ required: true, message: '请输入问卷标题', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入问卷概述' }],
        start_time: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
        end_time: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
        status: [{ required: true, message: '请选择问卷状态', trigger: 'blur' }],
        prize_status: [{ required: true, message: '请选择抽奖状态', trigger: 'blur' }],
        prize_desc: [{ required: true, message: '请输入抽奖说明' }],
        everybody_count: [{ required: true, message: '请输入抽奖次数', trigger: 'blur' }],
        banner: [{ required: true, message: '请上传图片' }]
      },
      ruless: {
        title: [{ required: true, message: '请输入奖品名称', trigger: 'blur' }],
        count: [{ required: true, message: '请输入奖品数量', trigger: 'blur' }],
        odds: [{ required: true, message: '请输入中奖概率', trigger: 'blur' }],
        image: [{ required: true, message: '请上传图片', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      rulless: {
        title: [{ required: true, message: '请输入问题题目', trigger: 'blur' }],
        type: [{ required: true, message: '请选择问题类型', trigger: 'blur' }],
        options: [{ required: true, message: '请输入问题', trigger: 'blur' }],
        open_other: [{ required: true, message: '请选择是否开启其它', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      ruleses: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
      },
      checkList: ['选中且禁用', '其它'],
      value: [],
      command: '',
      options: [],
      status: '',
      id: '',
      label: '',
      ssid: '', // 生成二维码id参数
      uploadUrl: '/asd_wqdc_api/admin/file/upload', // 上传接口的 URL
      dialogVisible: false, // 修改
      addVisible: false, // 新增
      applicaVisible: false, // 用户新增
      addprize: false, // 奖品新增
      addView: false, // 查看奖品
      Recording: false, // 中奖记录
      issue: false, // 问卷问题
      Answer: false, // 问题答卷
      addissue: false, // 添加问题
      participate: false, // 参与人数
      revisepriz: false, // 修改奖品
      reviseissue: false, // 修改问题
      application: false, // 报名限制
      applicaissue: false, // 报名修改
      currentIndex: -1, // 初始化时没有选中任何行
      currentIndexex: -1, // 初始化时没有选中任何行
      currentInd: -1,
      currentInde: -1,
      token: '',
      total: 0, // 当前的总条数
      toTal: 0, // 中奖记录
      tottol: 0, // 报名限制
      userid: '', // 报名删除用户id
      participateTotal: 0, // 参与人数
      applicaListTotal: 0, // 报名限制
      formData: {
        title: '',
        desc: '',
        start_time: '',
        end_time: '',
        everybody_count: '',
        prize_desc: '',
        status: '',
        banner: '',
        prize_status: '',
        answer_limit: null,
        max_answer_count: null,
        range: ''
      },
      addFormData: {
        title: '',
        desc: '',
        start_time: '',
        end_time: '',
        everybody_count: '',
        prize_desc: '',
        status: '',
        banner: '',
        prize_status: '',
        range: '',
        answer_limit: null,
        max_answer_count: null
      },
      prizeFormData: { // 奖品新增
        investigate_id: null,
        title: '',
        count: '',
        image: '',
        status: '',
        odds: ''

      },
      obtainViewData: { // 报名删除
        investigate_id: '',
        range_id: ''
      },
      addprizeFormData: { // 奖品修改
        investigate_id: '',
        title: '',
        count: '',
        image: '',
        status: '',
        odds: ''
      },

      applicaList: [], // 报名限制列表
      applicaListData: { // 报名限制
        investigate_id: null,
        page: 1,
        limit: 10,
        keyword: ''
      },
      applicationData: { // 报名限制增加
        investigate_id: null,
        mobile: '',
        name: ''
      },
      appliFormData: { // 报名限制修改
        id: null,
        investigate_id: '',
        mobile: '',
        name: ''
      },
      issueFormData: { // 问题新增
        investigate_id: null,
        title: '',
        type: '',
        options: [''],
        status: '',
        open_other: ''
      },
      addissueFormData: { // 修改问题
        investigate_id: '',
        title: '',
        type: '',
        options: [''], // 初始值为空字符串
        status: '',
        open_other: ''
      },
      prizeData: [], // 奖品列表
      RecordingData: [], // 中奖列表
      tableData: [],
      biaoGe: {
        page: 1,
        limit: 10,
        keyword: ''
      },
      priZeGee: { // 获取奖品列表
        investigate_id: null,
        keyword: ''
      },
      RecordingFetch: { // 获取中奖记录
        investigate_id: null,
        page: 1,
        limit: 10,
        keyword: ''
      },
      issueData: { // 问题列表
        investigate_id: null,
        keyword: ''
      },
      AnswerData: { // 问卷答卷
        investigate_id: null,
        people_id: null
      },
      issueList: [], // 问题列表
      AnswerList: [], // 问题答卷
      participateData: { // 参与人数
        investigate_id: null,
        page: 1,
        limit: 10,
        keyword: ''
      },
      participateList: [],
      priZeData: {
        investigate_id: '',
        title: '',
        type: '',
        options: '',
        status: '',
        open_other: ''
      }, // 奖品
      userForm: {
        // 搜索
        keyword: ''
      }
    }
  },
  created() {
    if (this.item.type === 2) {
      this.checkList = this.item.user_answer.split(',').map(answer => answer.trim())
    }
  },
  mounted() {
    this.token = getToken()
    this.getList()
    const el = this.$refs.qrcode
    const url = 'http://isdapp.shandong.gov.cn/jmopenpub/jmopen_files/unzip/d007eb1b92cf42c0afc2b5a5eafbf840/rzdyduafi/index.html#/pages/sweep/sweep' // 替换为你的链接地址

    const QRCode = new QRCode(el, {
      text: url,
      width: 200,
      height: 200
    })
    // 将item.other_answer的值赋给textarea
  },

  methods: {
    xsws() {
      this.dialogVisibles = false
      this.$refs.qrcode.innerHTML = '' // 清空二维码 div 的内容
    },
    sdsad() {
      this.dialogVisibles = false
      this.$refs.qrcode.innerHTML = '' // 清空二维码 div 的内容
    },
    generateQRCode() {
      const parameter = this.ssid // 替换为您的参数值
      const url = `http://isdapp.shandong.gov.cn/jmopenpub/jmopen_files/unzip/d007eb1b92cf42c0afc2b5a5eafbf840/rzdyduafi/index.html#/pages/sweep/sweep?id=${parameter}`
      this.$nextTick(() => {
        const qrcode = new QRCode(this.$refs.qrcode, {

          width: 200,
          height: 200
        })
        qrcode.makeCode(url)
      })
      // const qrcode = new QRCode(document.getElementById('qrcode'), {
      //   width: 200,
      //   height: 200
      // })
      // qrcode.makeCode('https://www.example.com')
    },
    handleOtherChecked(checked) {
      this.otherChecked = checked
    },
    removeCommas(index) {
      this.issueFormData.options[index] = this.issueFormData.options[index].replace(/,/g, '')
      this.addissueFormData.options[index] = this.addissueFormData.options[index].replace(/,/g, '')
    },
    addOption() {
      // 确保 this.issueFormData.options 是一个数组
      if (!Array.isArray(this.issueFormData.options)) {
        this.issueFormData.options = []
      }

      // 然后才能安全地使用 push 方法
      this.issueFormData.options.push('')
      // 确保 this.issueFormData.options 是一个数组
      if (!Array.isArray(this.addissueFormData.options)) {
        this.addissueFormData.options = []
      }

      // 然后才能安全地使用 push 方法
      this.addissueFormData.options.push('')
      // this.issueFormData.options.push('')// 在数组末尾添加一个空字符串，对应一个新的输入框
    },
    removeOption(index) {
      this.issueFormData.options.splice(index, 1)// 从数组中移除指定索引的元素
      this.addissueFormData.options.splice(index, 1)// 从数组中移除指定索引的元素
    },
    // 问卷修改回显
    handleEdit(row) {
      this.dialogVisible = true
      console.log(row, 'row2222222222')
      this.currentIndexex = this.tableData.indexOf(row) // 获取该行的索引
      this.formData = Object.assign({}, row) // 使用 Object.assign 复制该行的属性（避免直接引用）
    },
    // 奖品修改回显
    revisePri(row) {
      this.revisepriz = true
      this.currentInde = this.prizeData.indexOf(row) // 获取该行的索引
      this.addprizeFormData = Object.assign({}, row)
    },
    // 报名修改回显
    applicaView(row) {
      this.applicaissue = true
      this.currentIndexexex = this.appliFormData.indexOf(row) // 获取该行的索引
      this.appliFormData = Object.assign({}, row)
    },
    // 修改问题
    reviseiss(row) {
      this.reviseissue = true
      console.log(row, 'row3333333333')
      this.currentInd = this.issueList.indexOf(row) // 获取该行的索引
      this.addissueFormData = Object.assign({}, row)

      // 将 options 字符串转换为数组
      if (this.addissueFormData.options) {
        this.addissueFormData.options = this.addissueFormData.options.split(',').map(option => option.trim())
      }
    },
    formatDate(timestamp) {
      if (timestamp) {
        const date = new Date(timestamp)
        return date
          .toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
          })
          .replace(/\//g, '-')
      }

      return ''
    },
    // 取消重置表格数据
    onel() {
      this.$refs.addFormData.resetFields()
      this.addVisible = false
      this.getList()
    },
    // 取消报名限制重置表格数据
    applionel() {
      this.$refs.applicationData.resetFields()
      // this.$refs.addFormData.resetFields()
      this.applicaVisible = false
      // window.location.reload() // 刷新页面
    },
    // 奖品新增取消onell
    onell() {
      this.addprize = false
      this.$refs.prizeFormData.resetFields()
    },
    // 问题取消oneel
    oneel() {
      this.addissue = false
      this.$refs.issueFormData.resetFields()
    },
    uoludePage(newPage) {
      // 更新 limit 的值
      this.biaoGe.limit = newPage

      // 重新加载数据
      this.getList()
      console.log(newPage, 'newPage')
    },
    // 中奖记录limit
    uoludePa(newPage) {
      // 更新 limit 的值
      this.RecordingFetch.limit = newPage

      // 重新加载数据
      this.getRecording()
      console.log(newPage, 'newPage')
    },
    // 报名限制limit
    applicaLimit(newPage) {
      // 更新 limit 的值
      this.applicaListData.limit = newPage
      // 重新加载数据
      this.obtainize()
    },
    // 参与人数limit
    participateLimit(newPage) {
      // 更新 limit 的值
      this.participateData.limit = newPage
      // 重新加载数据
      this.getRecording()
      console.log(newPage, 'newPage')
    },
    // 选择页码的回调函数
    handlePage(val) {
      this.biaoGe.page = val
      this.getList()
      console.log(val, 'val')
    },
    // 报名限制页码
    applicaPag(val) {
      this.applicaListData.page = val
      this.obtainize()
      console.log(val, 'val')
    },
    // 中奖记录页码
    handlePag(val) {
      this.RecordingFetch.page = val
      this.getRecording()
      console.log(val, 'val')
    },

    // 参与人数页码
    participatePage(val) {
      this.participateData.page = val
      this.getparticipate()
      console.log(val, 'val')
    },
    // 奖品新增
    handleCommand(command, row) {
      console.log(row, 'row')
      // console.log(row, 'row2222222222222222222')
      this.prizeFormData.investigate_id = command
      this.ssid = command
      console.log(this.ssid, 'this.prizeFormData.investigate_id111111')
      if (row === 'a') {
        this.addprize = true
      } else if (row === 'b') {
        this.issueFormData.investigate_id = command
        this.addissue = true
      } else if (row === 'c') {
        const domain = 'https://dxapi.tengzhou.gov.cn/' // 替换为你的域名
        // const extraUrl = 'https://example.com' // 替换为你的额外链接

        const copyText = domain + ' '

        // 创建一个隐藏的textarea元素
        const textarea = document.createElement('textarea')
        textarea.value = copyText
        document.body.appendChild(textarea)

        // 选中textarea中的内容并执行复制命令
        textarea.select()
        document.execCommand('copy')

        // 清理并移除textarea元素
        document.body.removeChild(textarea)

        alert('复制成功！')
      } else if (row === 'd') {
        this.priZeGee.investigate_id = command
        this.addView = true
        this.getprize(this.priZeGee.investigate_id)
      } else if (row === 'e') {
        this.RecordingFetch.investigate_id = command
        this.Recording = true
        this.getRecording(this.RecordingFetch.investigate_id)
      } else if (row === 'f') {
        this.issueData.investigate_id = command
        this.issue = true
        this.getIssue(this.issueData.investigate_id)
      } else if (row === 'g') {
        this.participateData.investigate_id = command
        this.participate = true
        this.AnswerData.investigate_id = command
        this.getAnswer(this.AnswerData.investigate_id)
        this.getparticipate(this.participateData.investigate_id)
      } else if (row === 'h') {
        this.generateQRCode()
        this.dialogVisibles = true
      } else if (row === 'r') {
        this.applicaListData.investigate_id = command
        this.obtainize(this.applicaListData.investigate_id)

        this.application = true
      }
    },
    // 查看用户答卷
    issueView(row) {
      console.log(row.id, 'row')
      this.AnswerData.people_id = row.id // 对应id赋值给investigate_id
      this.Answer = true
      this.getAnswer(this.AnswerData.people_id)
      console.log(this.AnswerData, '1111111111111')
    },
    // 报名删除
    obtainView(row) {
      console.log(this.ssid, 'row')
      this.obtainViewData.investigate_id = this.ssid //
      this.obtainViewData.range_id = row.id // 对应id赋值给investigate_id
      this.deleView(this.obtainViewData.range_id, this.obtainViewData.investigate_id)
      this.obtainize()
    },
    // 新增按钮
    showAddForm() {
      this.addVisible = true
    },
    // 报名限制新增按钮
    applicaAddForm() {
      this.applicaVisible = true
    },
    // 表单校验 ，新增保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.handleAddSave()
        } else {
          this.$message.error('请填写完整表单数据！')

          return false
        }
      })
    },
    // 表单校验 ，报名保存
    submitapplica(formName) {
      // this.applicaAddSave()
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.applicaAddSave()
          this.$message.success('添加成功')
          this.obtainize()
        } else {
          this.$message.error('请填写完整表单数据！')

          return false
        }
      })
    },
    // 报名保存请求
    applicaAddSave() {
      console.log(this.applicationData, 'this.applicationData1112')
      this.applicationData.investigate_id = this.ssid
      application(this.applicationData)
        .then((data) => {
          this.$message.success(data.data.message)
          // 在请求成功后再去获取列表数据
          console.log(data, 'data11111111111')
        })
        .catch((error) => {
          console.error(error)
        })
      // ...
      this.obtainize()
      this.applionel()
    },
    // 新增保存
    handleAddSave() {
      console.log(this.addFormData, 'this.addFormData')
      // return
      console.log(this.addFormData, 'this.addFormData')
      // 将时间格式为字符串
      this.addFormData.start_time = this.formatDate(this.addFormData.start_time)
      this.addFormData.end_time = this.formatDate(this.addFormData.end_time)
      postUser(this.addFormData)
        .then((data) => {
          this.$message.success(data.data.message)
          console.log(data, 'data11111111111')
          // 在请求成功后再去获取列表数据
          this.getList()
          console.log(this.getList, 'this.getList')
        })
        .catch((error) => {
          console.error(error)
        })
      // ...
      this.getList()
      this.onel()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
          this.$refs.applicationData.resetFields()
        })
        .catch((_) => {})
    },
    // 表单校验 ，奖品新增保存
    prizeNew(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.GetprizeNew()
        } else {
          this.$message.error('请填写完整表单数据！')

          return false
        }
      })
    },
    // 奖品新增保存
    GetprizeNew() {
      postprizeNew(this.prizeFormData)
        .then((data) => {
          this.$message.success(data.message)
          console.log(data, 'data11111111111')
          console.log(data.message, '1111111111')
          // 在请求成功后再去获取列表数据
          // this.getList()
        })
        .catch((error) => {
          console.error(error)
        })
      // ...

      this.onell()
    },
    // 报名限制新增保存
    obtainNew() {
      obtain(this.applicationData)
        .then((data) => {
          this.$message.success(data.message)
          console.log(data, 'data11111111111')

          // 在请求成功后再去获取列表数据
          // this.getList()
        })
        .catch((error) => {
          console.error(error)
        })
      // ...

      this.onell()
    },
    // 表单校验， 问题新增 issueNew
    issueNew(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.GetissueNew()
        } else {
          this.$message.error('请填写完整表单数据！')

          return false
        }
      })
    }, // 问题新增保存
    GetissueNew() {
      if (this.issueFormData.type !== 0) {
        this.issueFormData.options = this.issueFormData.options.map(option => option.replace(',', ''))
        this.issueFormData.options = this.issueFormData.options.join(',') // 将options数组转换为逗号分隔的字符串
      }
      const postData = { ...this.issueFormData } // 使用对象解构复制一份 this.issueFormData

      if (this.issueFormData.type === 0) {
        delete postData.options // 如果 type 为 0，则删除 options 字段
        postData.open_other = 0 // 如果 type 为 0，则将 open_other 设为 0
      }

      postiIssue(postData)
        .then((data) => {
          this.$message.success(data.message)
          console.log(data, 'data11111111111')
          console.log(data.message, '1111111111')
          // 在请求成功后再去获取列表数据
          // this.getList()
        })
        .catch((error) => {
          console.error(error)
        })
      // ...

      this.oneel()
    },
    // 报名修改保存
    applicaSave() {
      this.applicaList.splice(this.currentIndexex, 1, this.appliFormData) // 使用该行的索引替换表格中的原始数据
      const requestDatat = {
        ...this.appliFormData, // 使用展开运算符将 this.formData 对象的键值对展开
        investigate_id: 28,
        mobile: '11',
        name: '11'
      }
      modify(requestDatat)
        .then((data) => {
          this.$message.success(data.message)
          console.log(data, 'data11111111111')
        })
        .catch((error) => {
          console.error(error)
        })
      // this.getList();
      // ...
      this.applicaissue = false
    },
    // 问卷修改保存
    handleSave() {
      console.log(this.formData, 'this.formData1111')
      this.formData.start_time = this.formatDate(this.formData.start_time)
      this.formData.end_time = this.formatDate(this.formData.end_time)
      this.tableData.splice(this.currentIndex, 1, this.formData) // 使用该行的索引替换表格中的原始数据
      const requestData = {
        ...this.formData, // 使用展开运算符将 this.formData 对象的键值对展开
        answer_limit: Number(this.formData.answer_limit),
        max_answer_count: Number(this.formData.max_answer_count)
      }

      console.log(requestData, 'requestData222222') // 打印修改后的this.addFormData
      updataUser(requestData)
        .then((data) => {
          this.$message.success(data.message)
          this.getList()
          console.log(data, 'data11111111111')
        })
        .catch((error) => {
          console.error(error)
        })
      // this.getList();
      // ...
      this.dialogVisible = false
    },
    // 奖品修改保存
    revisePrize() {
      this.prizeData.splice(this.currentInde, 1, this.addprizeFormData) // 使用该行的索引替换表格中的原始数据
      postrevise(this.addprizeFormData)
        .then((data) => {
          this.$message.success(data.message)
          console.log(data.data, 'data11111111111')
        })
        .catch((error) => {
          console.error(error)
        })
      // this.getList();
      // ...
      this.revisepriz = false
    },
    // 问题修改保存
    reviseissu() {
      // 去除逗号
      if (this.addissueFormData.type !== 0) {
        this.addissueFormData.options = this.addissueFormData.options.map(option => option.replace(',', ''))
        this.addissueFormData.options = this.addissueFormData.options.join(',') // 将options数组转换为逗号分隔的字符串
      }

      this.issueList.splice(this.currentInd, 1, this.addissueFormData) // 使用该行的索引替换表格中的原始数据
      console.log(this.addissueFormData, 'this.addissueFormData')
      postissue(this.addissueFormData)
        .then((data) => {
          this.$message.success(data.message)
          console.log(data.data, 'data11111111111')
        })
        .catch((error) => {
          console.error(error)
        })
      // this.getList();
      // ...
      this.reviseissue = false
    },
    // 列表的查询
    onSubmit(pageData) {
      pageData.page = 1
      pageData.limit = 10
      this.getList(pageData)
    },
    // 中奖记录查询
    onSbmit(pageData) {
      pageData.page = 1
      pageData.limit = 10
      this.getRecording(pageData)
    },
    // 问题列表
    issueSubmit(pageData) {
      pageData.page = 1
      pageData.limit = 10
      this.getIssue(pageData)
    },
    // 报名限制列表
    applicaSubmit(pageData) {
      pageData.page = 1
      pageData.limit = 10
      this.obtainize(pageData)
    },
    // 参与人数查询
    participateSubmit(pageData) {
      pageData.page = 1
      pageData.limit = 10
      this.getparticipate(pageData)
    },
    // 修改上传图片
    beforebannerUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }

      return isJPG || (isPNG && isLt2M)
    },
    handlebannerSuccess(response, file) {
      console.log(response, 'response')
      console.log(file, 'file')
      const { data } = response // 获取服务端返回的头像 URL
      const baseUrl = 'https://worker-1252745600.cos.ap-beijing.myqcloud.com/16975354959389.png/' // 去掉固定的 URL 部分
      const imgUrl = data.replace(baseUrl, 'https://worker-1252745600.cos.ap-beijing.myqcloud.com/', '') // 去掉固定部分的 URL，并添加新的URL
      this.formData.banner = imgUrl // 设置修改后的图片 URL
      this.$message.success('上传成功！')
    },
    handlebannerError() {
      this.$message.error('上传失败！')
    },
    // 修改奖品上传图片
    reviseP(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }

      return isJPG || (isPNG && isLt2M)
    },
    revisE(response, file) {
      console.log(response, 'response')
      console.log(file, 'file')
      const { data } = response // 获取服务端返回的头像 URL
      const baseUrl = 'https://worker-1252745600.cos.ap-beijing.myqcloud.com/16975354959389.png/' // 去掉固定的 URL 部分
      const imgUrl = data.replace(baseUrl, 'https://worker-1252745600.cos.ap-beijing.myqcloud.com/', '') // 去掉固定部分的 URL，并添加新的URL
      this.addprizeFormData.image = imgUrl // 设置修改后的图片 URL
      this.$message.success('上传成功！')
    },
    reviS() {
      this.$message.error('上传失败！')
    },
    // 新增上传图片
    beforeAxinzheng(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }

      return isJPG || (isPNG && isLt2M)
    },
    beforeAxinzhe(response, file) {
      console.log(response, 'response')
      console.log(file, 'file')
      const { data } = response // 获取服务端返回的头像 URL
      const baseUrl = 'https://worker-1252745600.cos.ap-beijing.myqcloud.com/16975354959389.png/' // 去掉固定的 URL 部分
      const imgUrl = data.replace(baseUrl, 'https://worker-1252745600.cos.ap-beijing.myqcloud.com/', '') // 去掉固定部分的 URL，并添加新的URL
      this.addFormData.banner = imgUrl // 设置修改后的图片 URL
      this.$message.success('上传成功！')
    },
    beforeAxinz() {
      this.$message.error('上传失败！')
    },

    // 新增奖品图上传
    prizeupload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }

      return isJPG || (isPNG && isLt2M)
    },
    prizeuplo(response, file) {
      console.log(response, 'response')
      console.log(file, 'file')
      const { data } = response // 获取服务端返回的头像 URL
      const baseUrl = 'https://worker-1252745600.cos.ap-beijing.myqcloud.com/16975354959389.png/' // 去掉固定的 URL 部分
      const imgUrl = data.replace(baseUrl, 'https://worker-1252745600.cos.ap-beijing.myqcloud.com/', '') // 去掉固定部分的 URL，并添加新的URL
      this.prizeFormData.image = imgUrl // 设置修改后的图片 URL
      this.$message.success('上传成功！')
    },
    prizeupl() {
      this.$message.error('上传失败！')
    },
    // mounted() {
    //   this.getList()
    //   // this.getprize()
    // },
    getList() {
      // 发送获取列表数据的请求
      postUsser(this.biaoGe)
        .then((data) => {
          this.tableData = data.data.list
          this.total = data.data.count || 0
          console.log(data.data, 'data.da')
        })
        .catch((error) => {
          console.error(error)
        })
    },
    getprize() {
      // 发送获取奖品列表数据的请求

      postprize(this.priZeGee)
        .then((data) => {
          this.prizeData = data.data
        })
        .catch((error) => {
          console.error(error)
        })
    },
    obtainize() {
      // 发送获取报名限制列表数据的请求
      obtain(this.applicaListData)
        .then((data) => {
          this.applicaList = data.data
          console.log(data.data, 'data.da')
          this.applicaListTotal = data.data.count || 0
        })
        .catch((error) => {
          console.error(error)
        })
    },
    getRecording() {
      // 发送获取中奖列表数据的请求
      postRecording(this.RecordingFetch)
        .then((data) => {
          this.RecordingData = data.data
        })
        .catch((error) => {
          console.error(error)
        })
    },
    getIssue() {
      // 发送获取问题列表数据的请求

      postIssue(this.issueData)
        .then((data) => {
          console.log(data, 'data')
          this.issueList = data.data
        })
        .catch((error) => {
          console.error(error)
        })
    },
    getAnswer() {
      // 发送获取问题答卷列表数据的请求

      postAnswer(this.AnswerData)
        .then((data) => {
          this.AnswerList = data.data
          console.log(this.AnswerList, 'AnswerList')
          // 将 user_answer 转为数组
          // this.AnswerList.forEach((item) => {
          //   item.user_answer = item.user_answer.split(',')
          // })
        })
        .catch((error) => {
          console.error(error)
        })
    },
    deleView() {
      // 发送获取问题答卷列表数据的请求
      dele(this.obtainViewData)
        .then((data) => {
          this.$message.success('删除成功')
          this.obtainize()
        })
        .catch((error) => {
          console.error(error)
        })
    },
    getparticipate() {
      // 发送获取问题答卷列表数据的请求
      console.log(this.participateData, 'NumberData')
      postparticipate(this.participateData)
        .then((data) => {
          console.log(data, 'data')
          this.participateList = data.data.list
          this.participateTotal = data.data.count || 0
          console.log(this.participateData, 'NumberData2222222222222222')
        })
        .catch((error) => {
          console.error(error)
        })
    }

  }
}
</script>
<style scoped>
.el-upload img {
  width: 100%;
  height: 100%;
}
.pager {
  position: absolute;
  bottom: 50px;
  right: 100px;
}
.custom-input {
  width: 700px; /* 设置宽度 */
}
.manage {
  height: 90%;
}
.manage-header {
  margin-top: 10px;
  margin-left: 20px;

}
.manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-container {
  height: 400px; /* 设置合适的高度 */
  overflow-y: auto; /* 显示垂直滚动条 */
}
.custom-width {
  width: 500px;
}
.Xm{
  margin-right: 20px;
}
.dropdown{
  margin-right: 20px;
}
.pagerE{
  margin-top:20px

}
.custom-input{
  width: 500px;
}
.button{
  width: 100px;
/* margin-left: 10px; */
color: #606266;
}
.ssx {
  display: inline-block; /* 确保元素以内联块级元素显示 */
  vertical-align: middle; /* 垂直居中对齐 */
}
.sss {
  width: 300px;
  height: 200px;
  margin-top: 20px;
  background-color: #fff;
  margin-left: 20px;
border: 1px solid #dcdfe6;
}
.sdaw{
 width: 500px;
  height: 100%;
border: 1px solid #dcdfe6;
margin-top: 20px;
margin-left: 20px;
}
.chenck{
   width: 300px;
   margin-bottom: 20px;
  height: 200px;
  margin-top: 20px;
  background-color: #fff;
  margin-left: 20px;
border: 1px solid #dcdfe6;
}
.elinput{
  width: 250px;
}
.elinpuh {
  width: 800px;
  margin-bottom: 20px;
  margin-left: 30px;
}
</style>
